Continuing with Electron's session object, this lesson will focus on a very specific object of the
session download item.
The download item object is a result of the sessions will download event.
You may have spotted this in the session documentation already here.
The very first instance event of the session, the second parameter of this event callback, providing
us with this download item will be covering this object, having its own dedicated page in the docs.
But first, let's start with the Will Download event.
Remember, the session object manages the state of a web content instance.
So this event then is fired when a download is initiated from Web contents with a reference to that
Web content instance also being passed to us in this event callback.
So to trigger a download, then we can add a simple download link in our content open index, not HTML.
I'll get rid of all this.
Adding an H2 heading download image linking to the splash image in the project directory just to keep
things simple, a remote image will also work.
Splash dot PMG closed the link and very importantly, to make this a download instead of a standard
link, we can use the new HTML5 download attribute.
Without this attribute will simply be navigated to the image, not what we want.
Save this.
And before we add the will download listener, let's see Electron's default behavior for handling downloads.
I'll save MINDGAMES to relaunch the app which is already running.
Click that link.
And we get prompted to select a location for this download to be saved, so very convenient and most
likely suitable for the majority of app downloads, but let's say we want to take full control of this
download.
That's where the world download event with its download item object comes in.
This object providing us with some events related to the progress of the download and a bunch of methods
for getting information from the download and managing it, including pausing the download, resuming
it and so on.
Back in May not always start by listening for a download on the main Windows Web content main window
using the default section.
So require the session module and create a window assigned to success as before session dot default
session.
And I'll get rid of the dev tools as these can sometimes cause a few warnings in the terminal when clicking
download links.
Then with a reference to the default section, listen for will download with a callback providing the
event object, the download item will be using.
And finally the web content that started this download.
I'll add a few log messages to demonstrate this download item starting download.
The name of the file being downloaded, which we can get with download item, get file name and the
total size of the download download item, get total bytes save.
Click the download link.
I'll cancel this, and over in the terminal, we see those messages, the file that would have been
downloaded had I not cancelled with the size of the download in bitts, note that this file name default
to the name of the resource we're about to download, but we can save it as any other name as well.
Let's see an example of actually downloading this file without prompting the user to save it.
Then I'll change these log messages to hold the logged out values in variables, referencing the total
bytes as file size.
And the file name as file name then to download this file to the user's machine automatically meaning
no prompt as we got by default, we can simply provide a path to save it.
To that being what the prompt is for calling on the download item said save path, I'm going to save
this to the desktop.
So if you recall from a previous lesson, we can get the path to the user's desktop with the app instance
calling up dot get path and passing it desktop.
Append to this path the file name slash file name.
At this point you can also save this under a different file name to what the download is actually called.
But be sure to have the correct extension, save my desktop being behind this app so we should see the
download appear.
Click.
And they're the images downloaded to my desktop without any prompt.
OK, so this way is perfectly fine for smaller files that download in a second or so.
But let's say we're downloading a larger file and want to provide the user some feedback as to the progress
of the download.
We can do this by listening for some progress event on that download item to properly demonstrate,
we'll need a slightly larger file to download and very importantly, have it be a remote file.
A local file will, of course, download instantly, so it won't make much sense.
I'll simply use a download service specifically file examples, dot com.
The link is in the lessened resources.
Feel free, however, to use any other remote resource browse files.
I'll download an audio file.
Select the file type and download size, I'll use this five meg mp3 file, click to copy the link and
back in indexed on HDMI.
I'll replace that link to Slashdot PMG with the NewLink.
Save that.
And now in this will download event.
So still within the context of a specific download, we can listen on the download item for the updated
event, pass a callback with the event object and a state parameter state being a string of either progressing
or interrupt it should something go wrong.
We're looking to get the progress of the download here.
So the first variable will want to set is the byte received so far assigned to received download item
dot get received bytes.
Then make sure the download is actually progressing by checking the state if state equals.
Progressing.
And we've already received some data, so checking whether received is true or not, zero, a sign to
progress the percentage received so far.
We can get this by dividing the bits received by the total bytes to be downloaded at times 100.
And to make this a round, no, I'll run it through math, dot round logged that percentage to the terminal
for now.
Save.
Click the download and check over in the terminal.
And there we see the progress percentage being logged up to 100 per cent with 100 firing a few times
as the download is finalized and written to disk.
So with that working, let's see a very basic example of displaying this to the client in index, not
GML.
I'll add a progress element, initial value of zero and max of 100 with an idea of progress.
Don't need this text in the tag.
Again, this being a very rudimentary example, but to make this element accessible in the global window
scope of this browser window or more specifically, the browser Windows Web content, I listen to window
dot progress document dot get aliment by IED progress.
So this element then over in our main processor, we can update this element via its Web contents.
Remember, we're getting the Web content responsible for this download here.
So on that web content, instant call, execute JavaScript.
Window dot progress, our progress element in the global scope of this web content is setting its value
equal to progress.
This variable here, so to recap, each time this download progresses, we calculate the percentage
of the download by each received and then set the value of the HTML progress element in the downloads
Web contents, which we referenced by its ID in the Renderer process.
Save.
We see the empty progress element here, delete this file we've already downloaded.
Click the link again.
And that progress bar fills up as the phylis downloaded a very simple example, but as you can see,
we have total control over app downloads with the download item in a production app.
Of course, you could listen for interruptions, pause the download and much more.